<div class="modal-header">
    <h3 class="modal-title">{{ 'title' | lang: 'ui/dialog/image'}}</h3>
</div>
<div class="modal-body">
    <tabset>
        <tab heading="{{ 'imagesearch' | lang: 'ui/dialog/image'}}">
            <form class="form-inline">
                <div class="form-group">
                    <label for="search-keyword">{{ 'keyword' | lang: 'ui/dialog/image'}}</label>
                    <input type="text" class="form-control" ng-model="data.searchKeyword2" id="search-keyword" placeholder="{{ 'placeholder' | lang: 'ui/dialog/image'}}">
                </div>
                <button class="btn btn-primary" ng-click="searchImage()">{{ 'baidu' | lang: 'ui/dialog/image'}}</button>
            </form>
            <div class="search-result" id="search-result">
                <ul>
                    <li ng-repeat="image in list" id="{{ 'img-item' + $index }}" ng-class="{'selected' : isSelected}" ng-click="selectImage($event)">
                        <img id="{{ 'img-' + $index }}" ng-src="{{ image.src || '' }}" alt="{{ image.title }}" onerror="this.parentNode.removeChild(this)" />
                        <span>{{ image.title }}</span>
                    </li>
                </ul>
            </div>
        </tab>
        <tab heading="{{ 'linkimage' | lang: 'ui/dialog/image'}}">
            <form>
                <div class="form-group" ng-class="{true: 'has-success', false: 'has-error'}[urlPassed]">
                    <label for="image-url">{{ 'linkurl' | lang: 'ui/dialog/image'}}</label>
                    <input type="text"
                           class="form-control"
                           ng-model="data.url"
                           ng-blur="urlPassed = data.R_URL.test(data.url)"
                           ng-focus="this.value = data.url"
                           ng-keydown="shortCut($event)"
                           id="image-url"
                           placeholder="{{ 'placeholder2' | lang: 'ui/dialog/image'}}">
                </div>
                <div class="form-group" ng-class="{'has-success' : titlePassed}">
                    <label for="image-title">{{ 'imagehint' | lang: 'ui/dialog/image'}}</label>
                    <input type="text" class="form-control" ng-model="data.title" ng-blur="titlePassed = true" placeholder="{{ 'placeholder3' | lang: 'ui/dialog/image'}}">
                </div>
                <div class="form-group">
                    <label for="image-preview">{{ 'preview' | lang: 'ui/dialog/image'}}</label>
                    <img class="image-preview" ng-src="{{ data.url }}" alt="{{ data.title }}"/>
                </div>
            </form>
        </tab>
        <tab heading="{{ 'uploadimage' | lang: 'ui/dialog/image'}}" active="true">
            <form>
                <div class="form-group">
                    <!-- 这里不能用 ng-change -->
                    <input type="file" name="upload-image" id="upload-image" class="upload-image" accept=".jpg,.JPG,jpeg,JPEG,.png,.PNG,.gif,.GIF" />
                    <label for="upload-image" class="btn btn-primary"><span>{{ 'selectfile' | lang: 'ui/dialog/image'}}</span></label>
                    <input id="paste-image" type="text" placeholder="{{ 'pasteimage' | lang: 'ui/dialog/image'}}"  style="width: 300px;" maxlength="0" />
                </div>
                <div class="form-group" ng-class="{'has-success' : titlePassed}">
                    <label for="image-title">{{ 'imagehint' | lang: 'ui/dialog/image'}}</label>
                    <input type="text" class="form-control" ng-model="data.title" ng-blur="titlePassed = true" placeholder="{{ 'placeholder3' | lang: 'ui/dialog/image'}}">
                </div>
                <div class="form-group">
                    <label for="image-preview">{{ 'preview' | lang: 'ui/dialog/image'}}</label>
                    <img class="image-preview" ng-src="{{ data.url }}" title="{{ data.title }}" alt="{{ data.title }}"/>
                </div>
            </form>
        </tab>
    </tabset>

</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">{{ 'ok' | lang: 'ui/dialog/image'}}</button>
    <button class="btn btn-warning" ng-click="cancel()">{{ 'cancel' | lang: 'ui/dialog/image'}}</button>
</div>